<template>
	<view>
		<top-navigation bgColor="#ffffff">
			<template #left-slot>
				医院简介
			</template>
		</top-navigation>
		<view class="content">
			<view class="hospital-item">
				<image :src="$getHost()+info.ext1" class="logo"></image>
				<view class="right">
					<view class="hospital-name">
						{{info.name}}
					</view>
					<view class="label">
						<view class="level">
							{{info.label}}
						</view>
						<view>
							{{info.type}}
						</view>
					</view>
					<view class="address" @click="seeLocation">
						<image src="/static/images/home/address.png" class="icon"></image>
						地址：{{info.province}}{{info.city}}{{info.area}}{{info.address}}
					</view>
				</view>
			</view>
			<view class="card">
				<text class="key">重点科室：</text>
				<text>{{info.department}}</text>
			</view>
			<view class="card">
				<text class="key">医院简历：</text>
				<text>{{info.intro}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalId: '',
				info: {}
			};
		},
		onLoad(option) {
			this.hospitalId = option.id;
			this.getHospitalDetail();
		},
		methods: {
			getHospitalDetail() {
				this.$request('/applet/index/page/getHospitalDetail', {
					id: this.hospitalId
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					} else {
						uni.$toast(res.msg);
					}
				})
			},
			seeLocation() {
				let coordinate = this.info.coordinate.split(',')
				let info = this.info
				console.log(coordinate, 'coordinate')
				// #ifdef MP-WEIXIN
				uni.openLocation({
					latitude: Number(coordinate[0]),
					longitude: Number(coordinate[1]),
					name: info.name,
					address: info.address,
					success: function () {
						console.log('success');
					}
				});
				// #endif
				// #ifdef APP-PLUS
				let url = '';
				if (plus.os.name == 'Android') {
					//判断是安卓端
					plus.nativeUI.actionSheet({
							//选择菜单
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function (e) {
							switch (e.index) {
								//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${Number(coordinate[0])},${Number(coordinate[1])}&referer=xxx`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${Number(coordinate[0])},${Number(coordinate[1])}&title=${info.name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${info.name}&lat=${Number(coordinate[0])}&lon=${Number(coordinate[1])}&dev=0`;
								break;
							default:
								break;
							}
							if (url != '') {
								url = encodeURI(url);
								//plus.runtime.openURL(url,function(e){})调起手机APP应用
								plus.runtime.openURL(url, function (e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）
					plus.nativeUI.actionSheet({
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function (e) {
							switch (e.index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${Number(coordinate[0])},${Number(coordinate[1])}&referer=xxx`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${Number(coordinate[0])},${Number(coordinate[1])}&title=${info.name}&content=${info.address}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${info.name}&lat=${Number(coordinate[0])}&lon=${Number(coordinate[1])}&dev=0`;
								break;
							default:
								break;
							}
							if (url != '') {
								url = encodeURI(url);
								plus.runtime.openURL(url, function (e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				}
				// #endif
				// #ifdef H5
				uni.showToast({
					duration: 1500,
					title: 'H5页面不支持唤起APP',
					icon: 'none'
				});
				// #endif
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7FB;
	}

	.content {
		padding: 20rpx;

		.hospital-item {
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 16rpx 0px rgba(0, 0, 0, 0.16);
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.logo {
				width: 200rpx;
				height: 200rpx;
				margin-right: 30rpx;
			}

			.right {
				height: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.hospital-name {
					max-width: 400rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 30rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.label {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;

					.level {
						font-size: 26rpx;
						font-weight: bold;
						color: #FF4D4D;
						margin-right: 46rpx;
					}
				}

				.introduce {
					max-width: 400rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #808080;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.address {
					max-width: 400rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.card {
			width: 100%;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 18rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;

			.key {
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>
